<script setup lang="ts">
import { h, onMounted, reactive, ref } from 'vue';

import { requestClient } from '#/api/request';

import { useVbenForm } from '/src/adapter/form';

onMounted(() => {});

const loadCreate = () => {
  return requestClient.post('/admin/auth.admin/index', {
    page: 1,
    initKey: 'id',
    initValue: '',
    select: true,
    quick_search: '',
    limit: 10,
  });
};
const handleMenuClick = (val) => {
  console.log(createArr);
  if (val.key == 2) {
    quick_search.value = '1008611';
  }
};
const quick_search = ref<string>(''); // 搜索条件
const pagination = reactive({
  // 分页器
  total: 200,
  current: 1,
  pageSize: 100,
});
const loading = ref<Boolean>(false); // loading状态
const handleTableChange: TableProps['onChange'] = (
  // table change事件 分页 排序等
  pag: { current: number; pageSize: number },
  filters: any,
  sorter: any,
) => {
  run({
    results: pag.pageSize,
    page: pag?.current,
    sortField: sorter.field,
    ...filters,
  });
};
const dataSource = []; // 表格数据
const columns = [
  // 表格渲染列
  {
    title: '货品分类',
    dataIndex: 'name',

    width: '20%',
  },
  {
    title: '样板图',
    dataIndex: 'name',
    width: '20%',
  },
  {
    title: '款号/简码',
    dataIndex: 'name',
    width: '20%',
  },
];

// 构建form
const [QueryForm] = useVbenForm({
  // 默认展开
  collapsed: false,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Cascader',
      componentProps: {
        allowClear: true,
        placeholder: '请选择货品分类',
        showSearch: true,
        multiple: true,
        options: [
          {
            label: 'Light',
            value: 'light',
            children: Array.from({ length: 20 })
              .fill(null)
              .map((_, index) => ({ label: `Number ${index}`, value: index })),
          },
          {
            label: 'Bamboo',
            value: 'bamboo',
            children: [
              {
                label: 'Little',
                value: 'little',
                children: [
                  {
                    label: 'Toy Fish',
                    value: 'fish',
                  },
                  {
                    label: 'Toy Cards',
                    value: 'cards',
                  },
                  {
                    label: 'Toy Bird',
                    value: 'bird',
                  },
                ],
              },
            ],
          },
        ],
        treeNodeFilterProp: 'label',
      },
      fieldName: 'isCascader',
      label: '树选择',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入款号/简码',
      },
      fieldName: 'password',
      label: '款号/简码',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入关联货号(模糊查询)',
      },
      fieldName: 'password',
      label: '关联货号',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: [
          {
            label: '有',
            value: '1',
          },
          {
            label: '无',
            value: '2',
          },
        ],
        placeholder: '请选择采购数量',
        showSearch: true,
      },
      fieldName: 'options',
      label: '采购数量',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: [
          {
            label: '是',
            value: '1',
          },
          {
            label: '否',
            value: '2',
          },
        ],
        placeholder: '请选择采',
        showSearch: true,
      },
      fieldName: 'options',
      label: '是否加工',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入款名(模糊查询)',
      },
      fieldName: 'password',
      label: '款名',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入备注(模糊查询)',
      },
      fieldName: 'password',
      label: '备注',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        allowClear: true,
        afterFetch: (data: { id: Number | string; realname: string }[]) => {
          return data.list.map((item: any) => ({
            label: item.realname,
            value: item.id,
          }));
        },
        api: loadCreate,
        placeholder: '请选择创建人',
        showSearch: true,
        filterOption: (input: string, option: any) => {
          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
        // dropdownRender: createDropdownContent,
      },
      fieldName: 'options',
      label: '创建人',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: [
          {
            label: '是',
            value: '1',
          },
          {
            label: '否',
            value: '2',
          },
        ],
        placeholder: '请选择人员类型',
        showSearch: true,
      },
      fieldName: 'options',
      label: '人员类型',
    },
  ],
  // 是否可展开
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // wrapperClass: 'grid-cols-1 md:grid-cols-2',
  wrapperClass: 'sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
});

function onSubmit(values: Record<string, any>) {
  const isCascader = [...values.isCascader];
  delete values.isCascader;
  const data = {
    ...values,
    isCascader,
  };
  console.log(data);
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}
</script>
<template>
  <div class="relative">
    <div
      class="bg-card border-border relative flex items-end border-b px-6 py-4"
    >
      <QueryForm>
        <template #expand-after>
          <a-space wrap>
            <a-button>新建</a-button>
            <a-dropdown>
              <template #overlay>
                <a-menu @click="(val) => handleMenuClick(val)">
                  <a-menu-item key="1">删除</a-menu-item>
                  <a-menu-item key="2">导出BOM工艺</a-menu-item>
                  <a-menu-item key="3">审核工艺</a-menu-item>
                  <a-menu-item key="4">申请反审核</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                更多操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </a-space>
        </template>
      </QueryForm>
    </div>
    <div class="h-full p-4">
      <div class="bg-card h-full rounded-md">
        <a-table
          :columns="columns"
          :row-key="(record) => record.login.uuid"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        />
      </div>
    </div>
  </div>
</template>
